<!DOCTYPE html>
<html lang="en">
<!-- vue ajax 请求 

    借助 vue-resource插件

    打开终端，键入  npm install vue-resource --save
-->
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrapper {
            width: 800px;
            margin: 20px auto;
        }
        .operation {
            margin-bottom: 10px;
            text-align: center;
            line-height: 20px;
            font-size: 18px;
        }
        .operation input {
            padding: 5px;
            border: 1px solid deepskyblue;
        }
        .operation button {
            border-radius: 3px;
            background-color: deepskyblue;
        }
        .search {
            text-align: left;
            line-height: 20px;
            font-size: 18px;
        }
        .search input {
            padding: 5px;
            border: 1px solid deeppink;
        }
        #tb{
            width: 800px;
            border-collapse: collapse;
            margin: 20px auto;
        }
        #tb th{
            background-color: #0094ff;
            color:white;
            font-size: 16px;
            padding: 5px;
            text-align: center;
            border: 1px solid black;
        }
        #tb td{
            padding: 5px;
            text-align: center;
            border: 1px solid black;
        }
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="operation">
        <input v-model="goodsName" class="add-name" type="text" placeholder="请输入名称">
        <input v-model="goodsPrice" class="price-name" type="text" placeholder="请输入价格">
        <button @click="add" class="add-btn" type="button">添加数据</button>
    </div>
    <div class="search">
        <input type="text" placeHolder="请输入筛选内容">
    </div>
    <table id="tb">
        <thead>
        <tr>
            <th>编号</th>
            <th>名称</th>
            <th>价格</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody v-cloak>
        <tr v-for="(v, i) in goodsList">
            <td>{{ i + 1 }}</td>
            <td>{{ v.name  | filename }}</td>  <!-- 插值表达式 -->
            <td>{{ v.price | formatPrice }}</td><!-- 插值表达式 -->
            <td>
                <a @click="del(i)" href="#">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
    <button type="button" @click="getGoodsList">获取列表数据</button> 
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-resource/dist/vue-resource.js"></script>

<script>

    // 1、先创建vue实例
    var vm = new Vue({
        el: '.wrapper',
        data: {
            goodsList: [
                { name: '帽子', price: 88 },
                { name: '裤子', price: 188 },
            ],
            goodsName: '',
            goodsPrice: ''
        },
        // vue的生命周期函数：实例创建完毕后，会自动调用
        created: function() {
            this.getGoodsList();  
        },
        methods: {
            
            getGoodsList: function(){
                console.log('获取商品列表数据!');
                var url = '';
                // vue中所有的内置属性与方法都$符号开头的
                // 发送ajax请求，请求回来的数据通过resp.body获取
                // 把数据赋值到视图就会自动刷新.
                this.$http.get(url).then(function(resp) {
                    this.goodsList - resp.body;
                });
                
            },

            // 添加商品
            add: function() {
                this.goodsList.push({
                    name: this.goodsName,
                    price: this.goodsPrice
                });
            },

            // 删除商品
            del: function(i) {
                this.goodsList.splice(i, 1);
            }
        },

        // 起始filters这里面也是定义一些方法，只不过使用方式不一样,
        // 这里面的函数只能在插值表达式当中通过 | 管道符来调用，
        // 默认这个函数会接收到插值表达式中的值，方法中可以对这个值进行一些逻辑处理，
        // 最后把处理的结果return出去，那么页面中就是显示return的结果。
        filters: {
            filename: function (val) {
                return '*' + val;
            },
            formatPrice: function(val) {
                return '$' + val;
            }

        }
    });
</script>
</body>
</html>
